import React, { useEffect, useState, useRef } from 'react'
import { SearchBar, Tabs, Space, Card, InfiniteScroll } from 'antd-mobile'
import { AppstoreOutline, UnorderedListOutline } from 'antd-mobile-icons'
import { lists, cateTop } from '../../https/index'
import { useNavigate } from 'react-router-dom'
import { Button, Swiper, Toast } from 'antd-mobile';

export default function Shou() {
    const [list, setList] = useState([])
    const [activeKey, setActiveKey] = useState(true)
    const [filters, setFilters] = useState(1)
    const [classification, setClassification] = useState(JSON.parse(sessionStorage.getItem('classification')) || [])
    const navigate = useNavigate()
    const [page, setPage] = useState(1)
    const [hasMore, setHasMore] = useState(true)
    const colors = ['/imgs/1.webp', '/imgs/2.webp', '/imgs/3.webp', '/imgs/4.webp', '/imgs/5.webp', '/imgs/6.webp', '/imgs/7.webp', '/imgs/8.webp', '/imgs/9.webp']

    const getList = async () => {
        const res = await lists(filters, page)
        setList(res.data.products)
    }

    const getCate = async () => {
        const res = await cateTop()
        const newCate = [{ id: 1, name: undefined }, ...res.data.categories]
        setClassification(newCate)
        sessionStorage.setItem('classification', JSON.stringify(newCate))
    }

    useEffect(() => {
        getCate()
    }, [])
    useEffect(() => {
        setPage(1)
        getList()
    }, [filters])

    const loadMore = async () => {
        const res = await lists(filters, page)
        setHasMore(res.data.products.length > 0)
        setPage(page + 1)
        setList([...list, ...res.data.products])
    }

    const items = colors.map((color, index) => (
        <Swiper.Item key={index}>
            <div
                style={{
                    height: '32rem', display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    fontSize: '48px',
                    userSelect: 'none'
                }}
                onClick={() => {
                    Toast.show(`你点击了卡片 ${index + 1}`)
                }}
            >
                <img src={color} style={{ width: '120rem', height: '120rem' }} />
            </div>
        </Swiper.Item>
    ))

    return (
        <div style={{ backgroundColor: '#f5f5f5', minHeight: '100vh' }}> {/* 添加京东风格背景色 */}
            {/* 顶部导航栏 - 使用京东红色系 */}
            <div style={{
                position: 'fixed',
                top: '0rem',
                paddingTop: '2rem',
                width: '120rem',
                height: '21rem',
                backgroundColor: '#e43130',  // 京东红
                zIndex: 100
            }}>
                <div style={{
                    backgroundColor: '#e43130',
                    display: 'flex',
                    width: '120rem',
                    alignItems: 'center'
                }}>
                    <div style={{
                        width: '100rem',
                        backgroundColor: '#e43130',
                        padding: '0 1rem'
                    }}>
                        <SearchBar
                            placeholder='请输入内容'
                            style={{
                                width: '88rem',
                                margin: 'auto',
                                '--background': '#fff',
                                '--border-radius': '20px',
                                '--height': '7rem'
                            }}
                            onFocus={() => { navigate('/sousuo') }}
                        />
                    </div>
                    <div style={{
                        backgroundColor: '#e43130',
                        width: '14rem',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}>
                        {activeKey
                            ? <UnorderedListOutline style={{ fontSize: '6rem', margin: '0 12px', color: 'white' }} onClick={() => setActiveKey(false)} />
                            : <AppstoreOutline style={{ fontSize: '6rem', margin: '0 12px', color: 'white' }} onClick={() => setActiveKey(true)} />}
                    </div>
                </div>

                {/* 分类标签栏 - 京东红色系 */}
                <div style={{
                    backgroundColor: '#e43130',
                    width: '120rem',
                    display: 'flex',
                    alignItems: 'center',
                    borderBottom: '1px solid #d81e06',  // 深红色边框
                    padding: '0.5rem 0'
                }}>
                    <Tabs
                        defaultActiveKey='1'
                        onChange={(key) => { setFilters(key) }}
                        style={{ flex: '1', '--active-line-color': 'white', '--title-font-size': '3.5rem' }}
                        activeLineMode='fixed'
                    >
                        {classification.map(item => (
                            <Tabs.Tab
                                title={item.name === undefined ? '推荐' : item.name}
                                key={item.id}
                                style={{
                                    '--active-title-color': 'white',
                                    '--title-color': 'rgba(255,255,255,0.8)'
                                }}
                            />
                        ))}
                    </Tabs>
                </div>
                <div style={{
                    backgroundColor: '#e43130',
                    width: '120rem',
                    borderBottom: '1px solid #d81e06',  // 深红色边框
                    padding: '0.5rem 0'
                }}>
                    <Swiper loop autoplay>
                        {items}
                    </Swiper>
                </div>
            </div>

            {/* 商品列表区域 */}
            {activeKey ? (
                <div style={{ marginTop: '55rem', marginBottom: '20rem' }}>
                    {list.map((item, index) => (
                        <div key={index} style={{
                            display: 'flex',
                            height: '30rem',
                            alignItems: 'center',
                            margin: '6rem 2rem',
                            backgroundColor: 'white',
                            borderRadius: '0.8rem',
                            boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
                        }} onClick={() => { navigate(`/productdetails?id=${item.id}`) }}>
                            <div style={{
                                width: '45rem',
                                height: '30rem',
                                backgroundColor: '#f5f5f5',
                                display: 'flex',
                                justifyContent: 'center',
                                alignItems: 'center'
                            }}>
                                <img src={item.image} style={{
                                    width: '40rem',
                                    height: '25rem',
                                    borderRadius: '0.4rem'
                                }} />
                            </div>
                            <div style={{ marginLeft: '3rem', flex: 1 }}>
                                <p style={{ fontSize: '3.5rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>{item.name}</p>
                                <p style={{ fontSize: '3rem', color: '#666', marginBottom: '0.5rem' }}>{item.description}</p>
                                <p style={{ fontSize: '3.5rem', color: '#e43130', fontWeight: 'bold' }}>￥{item.price.toFixed(2)}</p>
                            </div>
                        </div>
                    ))}
                    <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                </div>
            ) : (
                <div style={{
                    marginTop: '55rem',
                    marginBottom: '20rem',
                    display: 'flex',
                    flexWrap: 'wrap',
                    justifyContent: 'space-around',
                    padding: '0 1rem'
                }}>
                    {list.map((item, index) => (

                        <Space wrap key={index}>
                            <Card style={{
                                width: '48rem',
                                height: '55rem',
                                margin: '1rem',
                                borderRadius: '0.8rem',
                                boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
                            }} onClick={() => { navigate(`/productdetails?id=${item.id}`) }}>
                                <div style={{
                                    width: '48rem',
                                    height: '25rem',
                                    backgroundColor: '#f5f5f5',
                                    display: 'flex',
                                    justifyContent: 'center',
                                    alignItems: 'center'
                                }}>
                                    <img src={item.image} style={{
                                        width: '40rem',
                                        height: '20rem',
                                        borderRadius: '0.4rem'
                                    }} />
                                </div>
                                <div style={{ padding: '0.5rem' }}>
                                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                        <p style={{ fontSize: '3.2rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>{item.name}</p>
                                        <p style={{ fontSize: '3.5rem', color: '#e43130', fontWeight: 'bold' }}>￥{item.price.toFixed(2)}</p>
                                    </div>
                                    <p style={{ fontSize: '2.8rem', color: '#666' }}>{item.description}</p>
                                </div>
                            </Card>
                        </Space>
                    ))}
                    <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                </div>
            )}
        </div>
    )
}
